<template>
	<!-- marketing/pages/group/detail/index.wxml -->
	<view>
		<group-header></group-header>
		<!-- <nav txtColor="#18181A" image="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/static/back.png" title="拼团详情" :show_bol="false"></nav> -->

		<view>
			<view class="demarcation"></view>
			<!-- 活动 -->
			<view class="activity-container">
				<view class="title">{{ detailInfo.activityName }}</view>
				<view class="line-container">
					<view class="left-circle"></view>
					<view class="dotted-line"></view>
					<view class="right-circle"></view>
				</view>

				<view class="content">
					<view class="item">
						<view class="left">
							<image class="icon"
								src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/icon_date.png">
							</image>
							<text>活动期限</text>
						</view>
						<text class="tag">
							<text>{{ detailInfo.startTime }}</text>
							<text v-if="detailInfo.alwaysValidStatus == 1">~{{ detailInfo.endTime }}</text>
							<text v-if="detailInfo.alwaysValidStatus == 2">~长期有效</text>
						</text>
					</view>
					<view class="item">
						<view class="left">
							<image class="icon"
								src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/icon_date.png">
							</image>
							<text>活动时段</text>
						</view>
						<text class="tag">{{ detailInfo.limitTime ? detailInfo.limitTime : '全天' }}</text>
					</view>
					<view class="item">
						<view class="left">
							<image class="icon"
								src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/icon_time.png">
							</image>
							<text>成团时限</text>
						</view>
						<text
							class="tag">{{ detailInfo.teamTime }}{{ detailInfo.teamTimeUnit == 1 ? '分钟' : detailInfo.teamTimeUnit == 2 ? '小时' : '天' }}</text>
					</view>
					<view class="item">
						<view class="left">
							<image class="icon"
								src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/icon_user.png">
							</image>
							<text>参团人数</text>
						</view>
						<text class="tag">{{ detailInfo.teamCount }}人</text>
					</view>
					<image class="result-icon"
						src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/sx-success.png"
						v-if="detailInfo.status == 2"></image>
					<image class="result-icon"
						src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/sx-fail.png"
						v-if="detailInfo.status == 3"></image>
				</view>
				<view class="solid-line"></view>
				<view class="result-container">
					<view class="be-left-time" v-if="detailInfo.status == 1">
						拼团剩余时间 &nbsp;&nbsp;
						<u-count-down :time="time" format="HH:mm:ss"></u-count-down>
					</view>
					<view class="be-left-number" v-if="detailInfo.status == 1">
						距离拼团成功还差
						<text style="color: #fc724c">{{ detailInfo.surplusUserCount }}</text>
						人
					</view>
					<view class="success-info" v-if="detailInfo.status == 2">拼团成功，奖励已自动发放到你的账户中</view>
					<view class="fail-info" v-if="detailInfo.status == 3 && detailInfo.activityStatus == 3">活动已结束，拼团失败
					</view>
					<view class="fail-info" v-if="detailInfo.status == 3 && detailInfo.activityStatus == 3">
						未在规定时间内成团，还差
						<text style="color: #fc724c">{{ detailInfo.surplusUserCount }}</text>
						人
					</view>

					<view class="fail-info" v-if="detailInfo.status == 3 && detailInfo.activityStatus == 4">活动已停止，拼团失败
					</view>
					<view class="fail-info" v-if="detailInfo.status == 3 && detailInfo.activityStatus == 4">
						未在规定时间内成团，还差
						<text style="color: #fc724c">{{ detailInfo.surplusUserCount }}</text>
						人
					</view>

					<view class="fail-info" v-if="detailInfo.status == 3 && detailInfo.activityStatus == 2"
						style="margin: 30rpx auto">
						未在规定时间内成团,还差
						<text style="color: #fc724c">{{ detailInfo.surplusUserCount }}</text>
						人
						<view>活动还未结束，您可发起开团</view>
					</view>
				</view>
				<view class="member-container">
					<view class="item" v-for="(item, index) in userList" :key="index">
						<image :src="item.plUserAvatar"></image>

						<text>{{ item.plUserName }}</text>

						<image v-if="item.leaderStatus == 1"
							src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/crown.png"
							class="icon"></image>

						<view v-if="item.leaderStatus == 1" class="tag">团长</view>

						<view v-if="item.leaderStatus == 1" class="circle"></view>
					</view>
					<view class="item" v-if="detailInfo.status == 1">
						<image
							src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/invited.png">
						</image>
						<text>待邀请</text>
					</view>
				</view>
				<button v-if="detailInfo.userList && detailInfo.userList.length > 5" class="all-btn"
					@tap="toggle">{{ userList.length < 6 ? '查看全部' : '收起' }}</button>
			</view>

			<!-- 奖励 -->
			<view class="reward-container">
				<text class="title">成团奖励</text>
				<view class="solid-line"></view>
				<!-- 团长可得 -->
				<view class="founder-member" v-if="detailInfo.status == 0 || detailInfo.leaderStatus == 1">
					<view class="title">团长可得</view>
					<view class="reward-one">
						<view class="item" v-if="leaderReward.bonusDetail">
							<text class="content">￥{{ leaderReward.bonusDetail.bonusAmount }}</text>
							<image class="img"
								src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/frame.png">
							</image>
							<view class="content-title">奖励金</view>
						</view>
						<view class="item" v-if="leaderReward.integralDetail">
							<text class="content">{{ leaderReward.integralDetail.giveIntegral }}分</text>
							<image class="img"
								src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/frame.png">
							</image>
							<view class="content-title">积分</view>
						</view>
					</view>
					<view class="reward-two" v-if="leaderReward.couponDetailList||leaderReward.cardDetailList">
						<view class="reward-two-title">卡券</view>
						<view class="content-container">
							<view class="red-packet-item"
								v-for="(item, index) in leaderReward.couponDetailList[0].marketCouponVoList"
								:key="index">
								<view class="name">{{item.couponTypeStr}}</view>
								<view class="money">￥{{ item.couponQuota }}</view>
								<view class="condition">{{item.couponNotApplyCause}}</view>
							</view>
							<view class="red-packet-item"
								v-for="(item, index) in leaderReward.cardDetailList[0].marketCardVoList" :key="index">
								<view class="name">{{item.cardTypeStr}}</view>
								<view class="money">
									<text v-if="item.cardTypeStr=='金额卡'">￥</text>
									{{item.cardQuota}}
									<text>{{item.cardTypeStr=='电量卡'?'度':item.cardTypeStr=='折扣卡'?'折':item.cardTypeStr=='次数卡'?'次':''}}</text>
								</view>
								<view class="condition">{{item.cardNotApplyCause}}</view>
							</view>
						</view>
					</view>
				</view>

				<image v-if="detailInfo.leaderStatus == 1"
					src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/bg_activity_border.png"
					class="bg_activity_border"></image>

				<!-- 团员可得 -->
				<view class="founder-member">
					<view class="title">团员可得</view>
					<view class="reward-one">
						<view class="item" v-if="userReward.bonusDetail">
							<text class="content">￥{{ userReward.bonusDetail.bonusAmount }}</text>
							<image class="img"
								src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/frame.png">
							</image>
							<view class="content-title">奖励金</view>
						</view>
						<view class="item" v-if="userReward.integralDetail">
							<text class="content">{{ userReward.integralDetail.giveIntegral }}分</text>
							<image class="img"
								src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/frame.png">
							</image>
							<view class="content-title">积分</view>
						</view>
					</view>
					<view class="reward-two" v-if="userReward.couponDetailList||userReward.cardDetailList">
						<view class="reward-two-title">卡券</view>
						<view class="content-container">
							<view class="red-packet-item"
								v-for="(item, index) in userReward.couponDetailList[0].marketCouponVoList" :key="index">
								<view class="name">{{item.couponTypeStr}}</view>
								<view class="money">￥{{ item.couponQuota }}</view>
								<view class="condition">{{item.couponNotApplyCause}}</view>
							</view>
							<view class="red-packet-item"
								v-for="(item, index) in userReward.cardDetailList[0].marketCardVoList" :key="index">
								<view class="name">{{item.cardTypeStr}}</view>
								<view class="money">
									<text v-if="item.cardTypeStr=='金额卡'">￥</text>
									{{item.cardQuota}}
									<text>{{item.cardTypeStr=='电量卡'?'度':item.cardTypeStr=='折扣卡'?'折':item.cardTypeStr=='次数卡'?'次':''}}</text>
								</view>
								<view class="condition">{{item.cardNotApplyCause}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 活动说明 -->
			<view class="explain-container">
				<text class="title">活动说明</text>
				<view class="solid-line"></view>
				<view class="content">
					{{ detailInfo.explainText }}
				</view>
			</view>
		</view>

		<!-- 按钮 -->
		<view style="height: 120rpx"></view>
		<view class="btn-container">
			<!-- 除了未开团状态其他都显示 -->
			<button @tap="goMore" class="btn-group" v-if="detailInfo.status != 0">查看更多活动</button>

			<!-- 未开团 && 拼团人数已经满了 && 当前用户允许开团 -->
			<!-- <button bindtap="onGroup" class="btn-group" wx:if="{{detailInfo.leaderStatus != 1 && detailInfo.status == 0 && detailInfo.openGroupStatus == 1 }}" data-activityId="{{detailInfo.activityId}}">我要开团</button> -->

			<!-- 拼团进行中 && 该用户未参团 && 是通过链接进来的 &&是适用用户 -->
			<button @tap="onPartakeGroup" class="btn-group"
				v-if="detailInfo.status == 1 && detailInfo.leaderStatus == 4 && options.ST && detailInfo.applyUserStatus == 1 && detailInfo.joinActivityStatus != 1">
				立即参团
			</button>
			<!-- 当前用户允许开团 && 活动进行中 -->
			<button @tap="onGroup" class="btn-group"
				v-else-if="detailInfo.openGroupStatus == 1 && detailInfo.activityStatus == 2"
				:data-activityId="detailInfo.activityId">
				我要开团
			</button>

			<!-- (当前拼团的团员 || 在其他地方已经参团) && 邀请链接进来的 && 是适用用户 -->
			<!-- <button bindtap="goMine" class="btn-group" wx:if="{{ (detailInfo.leaderStatus == 2 || detailInfo.leaderStatus == 3) &&  options.ST && detailInfo.applyUserStatus == 1}}">查看我的拼团</button> -->

			<!-- 只有活动进行中 &&  是该团团长 -->
			<button @tap="share" class="btn-group"
				v-if="detailInfo.status == 1 && detailInfo.leaderStatus == 1">邀请拼团</button>
		</view>

		<!-- 查看团长奖励悬浮按钮 -->
		<!-- <view class="reward-btn-container" wx:if="{{ detailInfo.leaderStatus ==2 }}" bindtap="onShowReward">
        <image src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/icon-crown.png"></image>
        <text>查看团长奖励</text>
    </view> -->

		<!-- 满员弹窗 -->
		<!-- <van-popup :show="showPop" custom-class="popup-container" @close="onClosePop"> -->
		<u-popup :show="showPop" custom-class="popup-container" @close="onClosePop">
			<view class="container">
				<text class="text">来晚咯~该团已满员</text>
				<view class="btn-box">
					<button class="btn-close" @tap="onClosePop">关闭</button>
					<button class="btn-go-group" @tap="onGroup"
						v-if="detailInfo.openGroupStatus == 1 && detailInfo.activityStatus == 2">去开团</button>
				</view>
			</view>
		</u-popup>
		<!-- </van-popup> -->

		<!-- 无权限参加该活动 -->
		<!-- <van-popup :show="showPop1" custom-class="popup-container" @close="onClosePop1" :close-on-click-overlay="false"> -->
		<u-popup :show="showPop1" custom-class="popup-container" @close="onClosePop1" :close-on-click-overlay="false">
			<view class="container">
				<text class="text">抱歉，您无权限参加该活动</text>
				<view class="btn-box">
					<button class="btn-go-group" @tap="goMore">查看更多活动</button>
				</view>
			</view>
		</u-popup>
		<!-- </van-popup> -->

		<!-- 温馨提示 -->
		<!-- <van-popup :show="showTips" custom-class="tip-popup-container" @close="onCloseTips"> -->
		<u-popup :show="showTips" custom-class="tip-popup-container" @close="onCloseTips">
			<view class="title">温馨提示</view>
			<view class="container">
				<text class="text">您已参加该活动，不可重复参加</text>
				<view class="btn-box">
					<button class="btn-more" @tap="goMore">查看更多活动</button>
					<button class="btn-my-group" @tap="goMine">查看我的拼团</button>
				</view>
			</view>
		</u-popup>
		<!-- </van-popup> -->

		<!-- 团长奖励弹窗 -->
		<!-- <van-overlay :show="showReward" z-index="100"> -->
		<u-overlay :show="showReward" z-index="100">
			<view class="warp">
				<view class="icon-container" @tap="onCloseReward">
					<image class="img"
						src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/delete1.png">
					</image>
				</view>
				<view class="reward-popup-container">
					<view class="founder-member">
						<view class="title">团长可得</view>
						<view class="reward-one">
							<view class="item" v-if="leaderReward.bonusDetail">
								<text class="content">￥{{ leaderReward.bonusDetail.bonusAmount }}</text>
								<image class="img"
									src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/frame.png">
								</image>
								<view class="content-title">奖励金</view>
							</view>
							<view class="item" v-if="leaderReward.integralDetail">
								<text class="content">{{ leaderReward.integralDetail.giveIntegral }}分</text>
								<image class="img"
									src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/frame.png">
								</image>
								<view class="content-title">积分</view>
							</view>
						</view>
						<view class="reward-two" v-if="leaderReward.couponDetailList||leaderReward.cardDetailList">
							<view class="reward-two-title">卡券</view>
							<view class="content-container">
								<view class="red-packet-item"
									v-for="(item, index) in leaderReward.couponDetailList[0].marketCouponVoList"
									:key="index">
									<view class="name">{{item.couponTypeStr}}</view>
									<view class="money">￥{{ item.couponQuota }}</view>
									<view class="condition">{{item.couponNotApplyCause}}</view>
								</view>
								<view class="red-packet-item"
									v-for="(item, index) in leaderReward.cardDetailList[0].marketCardVoList"
									:key="index">
									<view class="name">{{item.cardTypeStr}}</view>
									<view class="money">
										<text v-if="item.cardTypeStr=='金额卡'">￥</text>
										{{item.cardQuota}}
										<text>{{item.cardTypeStr=='电量卡'?'度':item.cardTypeStr=='折扣卡'?'折':item.cardTypeStr=='次数卡'?'次':''}}</text>
									</view>
									<view class="condition">{{item.cardNotApplyCause}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</u-overlay>
		<!-- </van-overlay> -->

		<!-- 分享弹窗 -->
		<shareTabs :tabs='tabs' :tabsShow='tabsShow' :shareConfig='shareConfig' @tabsClose='tabsClose'></shareTabs>
	</view>
</template>

<script>
	// import zpMixins from '@/uni_modules/zp-mixins/index';
	import groupHeader from '../../../components/group-header/index';
	// import nav from '@/components/nav/nav';
	// import vanPopup from './@vant/weapp/popup/index';
	// import vanOverlay from './@vant/weapp/overlay/index';
	import shareTabs from 'marketing_page/components/share-tabs/share-tabs';
	// import vanCountDown from './@vant/weapp/count-down/index';

	// marketing/pages/group/detail/index.ts
	const app = getApp();
	import {
		getGroupDetail,
		openGroup,
		partakeGroup
	} from '../../../../api/marketing/group';
	import shareTypes from '../../../../utils/shareTypes';
	const dayjs = require('./../../../../utils/dayjs.min.js');
	export default {
		components: {
			groupHeader,
			shareTabs,
		},
		data() {
			return {
				sharePath: '',
				tabsShow: false,
				shareConfig: {},
				tabs: ['share'],
				showTips: false,
				showTipText: '',
				showReward: false,
				showPop: false,
				showPop1: false,
				detailInfo: {
					activityName: '',
					startTime: '',
					alwaysValidStatus: 0,
					endTime: '',
					limitTime: false,
					teamTime: '',
					teamTimeUnit: 0,
					teamCount: '',
					status: 0,
					surplusUserCount: '',
					activityStatus: 0,
					userList: [],
					leaderStatus: 0,
					explainText: '',
					applyUserStatus: 0,
					joinActivityStatus: 0,
					openGroupStatus: 0,
					activityId: '',
					groupId: ''
				},
				leaderReward: {
					bonusDetail: {
						bonusAmount: ''
					},

					integralDetail: {
						giveIntegral: ''
					},

					couponDetail: {
						couponOptionApplyDetailList: [],
						total: ''
					}
				},
				// 团长奖励
				userReward: {
					bonusDetail: {
						bonusAmount: ''
					},

					integralDetail: {
						giveIntegral: ''
					},

					couponDetail: {
						couponOptionApplyDetailList: [],
						total: ''
					}
				},
				// 团员奖励
				userList: [],
				// 参团成员
				time: 0,
				timeData: {
					hours: '',
					minutes: '',
					seconds: ''
				},
				activityId: 0,
				scene: [
					// 详见小程序场景值
					1007, 1008, 1036, 1065, 1194
				],
				options: {
					ST: ''
				}
			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			console.log(options)
			this.setData({
				options: app.getAppOptions(options)
			});
			this.shareMethod();
		},
		onShow() {},
		onShareAppMessage() {
			return {
				title: '参团邀请',
				imageUrl: 'http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/invitation/activity.png',
				path: this.sharePath
			};
		},
		onPullDownRefresh() {
			const {
				activityId,
				groupId
			} = this.detailInfo;
			this.getDetail(groupId, activityId);
		},
		methods: {
			tabsClose() {
				this.setData({
					tabsShow: false
				});
			},
			setSharePath() {
				const {
					activityId,
					groupId
				} = this.detailInfo;
				let uid = uni.getStorageSync('memberId');
				let userInfo = uni.getStorageSync('userInfo') || {};
				this.setData({
					sharePath: `/pages/sharePage/sharePage?groupId=${groupId}&activityId=${activityId}&ST=${shareTypes.PINGTUAN}`,
					shareConfig: {
						path: '/pages/sharePage/sharePage',
						scene: `groupId=${groupId}&activityId=${activityId}&ST=${shareTypes.PINGTUAN}`,
						wxPath: `pages/sharePage/sharePage?groupId=${groupId}&activityId=${activityId}&ST=${shareTypes.PINGTUAN}`,
						wxTitle: `参团邀请`,
						wxImage: 'http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/invitation/activity.png'
					}
				});
			},
			shareMethod() {
				let options = this.options;
				const groupId = options.groupId == 'null' ? null : options.groupId;
				const activityId = options.activityId;
				this.setData({
					activityId
				});
				app.globalData.CHECK_LOGIN(async () => {
					this.getDetail(groupId, activityId, true);
				});
			},

			//   分享团后被邀请人进来后的处理逻辑
			shareGroupStatus() {
				// 判断是否通过邀请进入
				let options = this.options;
				if (options.ST == shareTypes.PINGTUAN && options.uid != uni.getStorageSync('memberId')) {
					const {
						detailInfo
					} = this;
					console.log(detailInfo.leaderStatus, detailInfo.surplusUserCount, detailInfo.status, 4564656);
					// 满员
					if (detailInfo.leaderStatus == 4 && detailInfo.surplusUserCount == 0) {
						this.onShowPop();
						return;
					}

					// 提示您已经参加该活动
					if (detailInfo.joinActivityStatus == 1 && detailInfo.status == 1) {
						this.onShowTips();
						return;
					}
				}
			},

			onChange(e) {
				let timeData = e.detail;
				timeData.hours = this.timeAdd0(timeData.days * 24 + timeData.hours);
				timeData.minutes = this.timeAdd0(timeData.minutes);
				timeData.seconds = this.timeAdd0(timeData.seconds);
				this.setData({
					timeData: e.detail
				});
			},

			finished() {
				console.log('倒计时结束');
				let timeData = this.timeData;
				let {
					hours,
					minutes,
					seconds
				} = timeData;
				if (hours == '00' && minutes == '00' && seconds == '00') {
					const {
						activityId,
						groupId
					} = this.detailInfo;
					this.getDetail(groupId, activityId);
				}
			},

			// 时间补0操作
			timeAdd0(num) {
				if (num < 10) {
					return '0' + num;
				}
				return num;
			},

			async getDetail(groupId, activityId, share) {
				const _params = {
					groupId: groupId,
					activityId,
					sellerId: app.globalData.sellerId,
					userId: uni.getStorageSync('memberId')
				};
				const {
					code,
					data
				} = await getGroupDetail(_params).catch((err) => {});
				if (code === 200) {
					const {
						leaderReward,
						userReward
					} = data;
					// 计算优惠卷总金额
					if (leaderReward.couponDetail) {
						const arr = leaderReward.couponDetail.couponOptionApplyDetailList.map((item) => item.amount);
						leaderReward.couponDetail.total = arr.reduce((pre, cur) => pre + cur, 0);
					}
					if (userReward.couponDetail) {
						const arr2 = userReward.couponDetail.couponOptionApplyDetailList.map((item) => item.amount);
						userReward.couponDetail.total = arr2.reduce((pre, cur) => pre + cur, 0);
					}

					// 倒计时
					let time = dayjs(data.endGroupTime).valueOf() - dayjs().valueOf();
					// time = 5000
					// 活动是否结束
					data.expire = !(dayjs(data.endTime).valueOf() - dayjs().valueOf() > 0);

					// 展示5个成员
					const userList = data.userList || [];
					if (userList.length > 5) {
						userList.slice(0, 5);
					} else {
						userList;
					}
					console.log(data, 'datata22222')
					this.setData({
						detailInfo: data,
						leaderReward,
						userReward,
						time,
						userList
					});
					// 是否触发分享弹窗
					if (share) {
						this.shareGroupStatus();
					} // 不是适用用户
					if (data.applyUserStatus == 2) {
						this.onShowPop1();
						return;
					}
				}
			},

			// 展开/收起 所有拼团成员
			toggle() {
				let userList = (this.detailInfo).userList;
				if (this.userList.length < 6 && userList.length > 5) {
					this.setData({
						userList
					});
				} else {
					this.setData({
						userList: userList.length > 5 ? userList.slice(0, 5) : userList
					});
				}
			},

			// 立即开团
			async onGroup() {
				const activityId = (this.detailInfo).activityId;
				const _params = {
					activityId,
					sellerId: app.globalData.sellerId,
					userId: uni.getStorageSync('memberId'),
					partakeChannel: 3
				};
				const {
					code,
					data
				} = await openGroup(_params).catch((err) => {});
				if (code === 200) {
					const {
						activityId,
						groupId
					} = data;
					uni.showToast({
						title: '开团成功',
						icon: 'none',
						duration: 3000
					});
					this.options = {
						activityId,
						groupId
					};
					this.onClosePop();
					setTimeout(() => {
						this.getDetail(groupId, activityId);
					}, 1500);
				}
			},

			// 参团
			async onPartakeGroup() {
				const detailInfo = this.detailInfo;
				const {
					activityId,
					groupId
				} = this.detailInfo;

				// 提示您已经参加该活动
				if (detailInfo.joinActivityStatus == 1 && detailInfo.status == 1) {
					this.onShowTips();
					return;
				}
				const _params = {
					activityId,
					groupId,
					sellerId: app.globalData.sellerId,
					userId: uni.getStorageSync('memberId'),
					partakeChannel: 3
				};
				const {
					code,
					msg
				} = await partakeGroup(_params).catch((err) => {});
				if (code === 200) {
					uni.showToast({
						title: '参团成功',
						icon: 'none',
						duration: 3000
					});
				} else {
					uni.showToast({
						title: msg,
						icon: 'none',
						duration: 3000
					});
				}
				setTimeout(() => {
					this.getDetail(groupId, activityId);
				}, 1500);
			},

			// 拼团邀请
			share() {
				this.setSharePath()
				this.tabsShow = true
			},

			// 更多拼团
			goMore() {
				uni.navigateTo({
					url: '/marketing_page/pages/group/more/index'
				});
			},

			// 我的拼团
			goMine() {
				uni.navigateTo({
					url: '/marketing_page/pages/group/list/index'
				});
			},

			onShowTips() {
				this.setData({
					showTips: true
				});
			},

			onCloseTips() {
				this.setData({
					showTips: false
				});
			},

			onShowReward() {
				this.setData({
					showReward: true
				});
			},

			onCloseReward() {
				this.setData({
					showReward: false
				});
			},

			onShowPop() {
				this.setData({
					showPop: true
				});
			},

			onClosePop() {
				this.setData({
					showPop: false
				});
			},

			onShowPop1() {
				this.setData({
					showPop1: true
				});
			},

			onClosePop1() {
				this.setData({
					showPop1: false
				});
			}
		}
	};
</script>
<style lang="less" scoped>
	/* marketing/pages/group/detail/index.wxss */
	page {
		background: #f5f7fa;
	}

	.demarcation {
		height: 20rpx;
		background: #bfccdb;
		border: 6rpx solid #f2f7fc;
		border-radius: 20rpx;
		margin: 0 5rpx;
		margin-top: 10rpx;
	}

	.activity-container {
		width: 628rpx;
		min-height: 294rpx;
		/* background: linear-gradient(0deg, #FFFFFF, #F4F6F8);*/
		background: #ffffff;
		border: 2rpx solid #ffffff;
		/* box-shadow: 4rpx 7rpx 20rpx 0rpx rgba(166,171,179,0.2400);*/
		border-radius: 0 0 16rpx 16rpx;
		margin: 0 auto;
		margin-top: -15rpx;
		padding: 32rpx;

		.title {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #303133;
			margin: 0 auto;
		}

		.line-container {
			display: flex;

			.dotted-line {
				width: 100%;
				border: 1rpx dashed #dcdfe6;
				margin: 20rpx 0;
			}

			.left-circle {
				width: 18rpx;
				height: 36rpx;
				border-radius: 0 18rpx 18rpx 0;
				line-height: 36rpx;
				background-color: #f5f7fa;
				position: absolute;
				left: 30rpx;
			}

			.right-circle {
				width: 18rpx;
				height: 36rpx;
				border-radius: 18rpx 0 0 18rpx;
				line-height: 36rpx;
				background-color: #f5f7fa;
				position: absolute;
				right: 30rpx;
			}
		}

		.content {
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			position: relative;

			.item {
				display: flex;
				align-items: center;
				margin-bottom: 40rpx;
				justify-content: flex-start;

				.left {
					display: flex;
					align-items: center;
					white-space: nowrap;

					.icon {
						width: 29rpx;
						height: 29rpx;
					}

					text {
						flex: 1;
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #606266;
						margin-left: 16rpx;
					}
				}

				text {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #303133;
				}

				.tag {
					margin-left: 62rpx;
				}
			}

			.result-icon {
				position: absolute;
				width: 148rpx;
				height: 121rpx;
				bottom: 10rpx;
				right: 10rpx;
			}
		}

		.solid-line {
			border: 1rpx solid #dcdfe6;
		}

		.result-container {
			display: flex;
			flex-direction: column;
			align-items: center;

			.fail-info {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #606266;
				margin: 31rpx auto;
			}

			.success-info {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #fc724c;
				margin: 31rpx auto;
			}

			.be-left-time {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #303133;
				display: flex;
				align-items: center;
				justify-content: space-around;
				margin: 31rpx auto;

				.item,
				text {
					display: inline-block;
					width: 40rpx;
					height: 40rpx;
					background: rgba(159, 158, 156, 1);
					border-radius: 5rpx;
					font-size: 28rpx;
					font-family: DIN;
					font-weight: 400;
					color: #ffffff;
					text-align: center;
					line-height: 40rpx;
					margin: 5rpx;
				}
			}

			.be-left-number {
				display: flex;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #606266;
			}
		}

		.member-container {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			margin: 40rpx auto;

			.item {
				display: flex;
				flex-direction: column;
				align-items: center;
				margin: 0 9rpx 20rpx 9rpx;
				position: relative;

				image {
					width: 110rpx;
					height: 110rpx;
					border-radius: 50%;
				}

				text {
					font-size: 22rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #606266;
					margin-top: 5rpx;
					width: 110rpx;
					text-overflow: ellipsis;
					overflow: hidden;
					text-align: center;
					white-space: nowrap;
				}

				.icon {
					position: absolute;
					right: -10rpx;
					top: -20rpx;
					width: 46rpx;
					height: 38rpx;
				}

				.tag {
					position: absolute;
					bottom: 30rpx;
					left: 30rpx;
					z-index: 109;
					width: 56rpx;
					height: 32rpx;
					background: #f7a14a;
					font-size: 20rpx;
					font-family: PingFang SC;
					color: #ffffff;
					text-align: center;
					line-height: 32rpx;
				}

				.circle {
					position: absolute;
					width: 110rpx;
					height: 110rpx;
					border: 1rpx solid #fc724c;
					border-radius: 50%;
					top: 0;
				}
			}
		}

		.all-btn {
			width: 180rpx;
			height: 64rpx;
			background: linear-gradient(105deg, #2b99ff, #1b8cf5);
			box-shadow: 0px 3rpx 6rpx 0rpx rgba(0, 110, 212, 0.3);
			border-radius: 32rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #ffffff;
			line-height: 64rpx;
		}
	}

	.reward-popup-container,
	.reward-container {
		width: 628rpx;
		background: linear-gradient(0deg, #ffffff, #f4f6f8);
		border: 2rpx solid #ffffff;
		box-shadow: 4rpx 7rpx 20rpx 0px rgba(166, 171, 179, 0.24);
		border-radius: 16rpx;
		padding: 32rpx;
		margin: 20rpx auto;

		.title {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #303133;
		}

		.solid-line {
			border: 1rpx solid #dcdfe6;
			margin: 32rpx 0 40rpx 0;
		}

		.founder-member {
			.title {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #ad6030;
				margin-bottom: 30rpx;
			}

			.reward-one {
				display: flex;
				flex-wrap: wrap;
				/* justify-content: space-between;*/
				margin-bottom: 20rpx;

				.item {
					background: url();
					width: 202rpx;
					height: 192rpx;
					background-size: cover;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					margin-bottom: 20rpx;
					margin-right: 16rpx;
					position: relative;

					.content {
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #fc724c;
						margin-bottom: 36rpx;
					}

					.img {
						width: 182rpx;
						height: 64rpx;
					}

					.content-title {
						position: absolute;
						width: 182rpx;
						height: 64rpx;
						line-height: 64rpx;
						text-align: center;
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #a14b20;
						top: 102rpx;
					}
				}
			}

			.reward-two {
				display: flex;
				flex-direction: column;
				align-items: center;

				.reward-two-title {
					background: url();
					width: 638rpx;
					height: 94rpx;
					background-size: cover;
					text-align: center;
					line-height: 94rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #ae865c;
					z-index: 1;
				}

				.content-container {
					width: 636rpx;
					background: rgba(253, 247, 240, 0.6);
					border-radius: 0 0 10rpx 10rpx;
					display: flex;
					flex-wrap: wrap;
					justify-content: flex-start;

					.red-packet-item {
						background: url();
						width: 180rpx;
						height: 180rpx;
						background-size: cover;
						display: flex;
						flex-direction: column;
						align-items: center;
						font-size: 30rpx;
						position: relative;
						margin: 20rpx;
						.name {
							color: #A26D35;
							padding-top: 0rpx;
							margin-bottom: 25rpx;
							font-size: 25rpx;
						}

						.money {
							font-family: PingFang SC;
							font-weight: bold;
							color: #f0703e;
							margin-bottom: 40rpx;
						}

						.condition {
							font-size: 26rpx;
							color: #FAD9B1;
						}
					}
				}
			}
		}

		.bg_activity_border {
			width: 695rpx;
			height: 25rpx;
			margin: 20rpx -32rpx;
		}
	}

	.explain-container {
		width: 628rpx;
		background: linear-gradient(0deg, #ffffff, #f4f6f8);
		border: 2rpx solid #ffffff;
		box-shadow: 4rpx 7rpx 20rpx 0px rgba(166, 171, 179, 0.24);
		border-radius: 16rpx;
		padding: 32rpx;
		margin: 20rpx auto;

		.title {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #303133;
		}

		.solid-line {
			border: 1rpx solid #dcdfe6;
			margin: 32rpx 0 40rpx 0;
		}

		.content {
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #303133;
		}
	}

	.btn-container {
		width: 696rpx;
		height: 120rpx;
		background: linear-gradient(0deg, #ffffff, #f4f6f8);
		position: fixed;
		bottom: 0;
		display: flex;
		align-items: center;
		z-index: 999;
		padding: 0 32rpx;

		.btn-group {
			flex: 1;
			height: 88rpx;
			background: linear-gradient(105deg, #268ae8, #1487fa);
			box-shadow: 0px 3rpx 6rpx 0px rgba(0, 110, 212, 0.3);
			border-radius: 44rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #ffffff;
			line-height: 88rpx;
			margin: 0 20rpx;
		}
	}

	.popup-container {
		width: 590rpx;
		height: 362rpx;
		background: #ffffff;
		border-radius: 16rpx;

		.container {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}

		.text {
			font-size: 34rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #303133;
			margin-top: 70rpx;
		}

		.btn-box {
			display: flex;
			justify-content: space-around;
			width: 100%;
			padding: 0 32rpx;
			margin-top: 70rpx;

			.btn-close {
				width: 251rpx;
				height: 88rpx;
				border: 1rpx solid #909399;
				border-radius: 44rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #909399;
				line-height: 88rpx;
			}

			.btn-go-group {
				width: 251rpx;
				height: 88rpx;
				background: linear-gradient(105deg, #2b99ff, #1b8cf5);
				box-shadow: 0rpx 3rpx 6rpx 0rpx rgba(0, 110, 212, 0.3);
				border-radius: 44rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #ffffff;
				line-height: 88rpx;
			}
		}
	}

	.reward-btn-container {
		width: 250rpx;
		height: 75rrpx;
		background: #ffffff;
		border: 1rpx solid #eeeeee;
		box-shadow: 0px 0px 5rpx 0px rgba(221, 75, 10, 0.15);
		border-radius: 37rpx 0px 0px 37rpx;
		position: fixed;
		right: 0;
		top: 50%;
		z-index: 99;
		display: flex;
		align-items: center;
		/* justify-content: space-around;*/

		image {
			width: 58rpx;
			height: 58rpx;
			margin: 0 20rpx 0 5rpx;
		}

		text {
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #606266;
		}
	}

	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
		position: relative;

		.icon-container {
			position: absolute;
			top: 250rpx;
			right: 20rpx;

			.img {
				width: 44rpx;
				height: 44rpx;
			}
		}

		.reward-popup-container {
			width: 638rpx;
			min-height: 620rpx;
			background: #ffffff;
			border-radius: 16rpx;
			padding: 40rpx 32rpx;
		}
	}

	.tip-popup-container {
		width: 642rpx;
		min-height: 355rpx;
		background: #ffffff;
		border-radius: 16rpx;
		padding: 40rpx 30rpx;

		.title {
			font-size: 34rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #fc724c;
		}

		.container {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			margin-top: 80rpx;

			.text {
				font-size: 34rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #606266;
			}

			.btn-box {
				display: flex;
				justify-content: space-between;
				margin-top: 120rpx;
				width: 100%;

				.btn-more {
					width: 279rpx;
					height: 88rpx;
					border: 1rpx solid #909399;
					border-radius: 44rpx;
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #909399;
					line-height: 88rpx;
				}

				.btn-my-group {
					width: 279rpx;
					height: 88rpx;
					background: linear-gradient(105deg, #2b99ff, #1b8cf5);
					box-shadow: 0rpx 3rpx 6rpx 0rpx rgba(0, 110, 212, 0.3);
					border-radius: 44rpx;
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #ffffff;
					line-height: 88rpx;
				}
			}
		}
	}
</style>